<template>
    <div class="mvDetial">
<!--        当前mv详情-->
        <div style="width: 600px;height: 400px">
            <div style="color: black"><h2>MV详情</h2></div>
            <div class="mv">
                <video style="height: 100%;width: 100%" :src="mv.url" controls>

                </video>
            </div>
        </div>
<!--相关mv详情-->
        <div style="width: 350px;margin-left: 15px">
            <div  style="color: black">
                <h2>相关推荐</h2>
            </div>
            <div class="xgmv" v-for="(item,index) in xgmvs" :key="index" @click="mvDetail(item)">
                <div style="width: 48%;height: 100%"><img :src="item.cover" style="width: 100%;height: 100%"></div>
                <div style="width: 48%;height: 100%;margin-left: 5px">
                    <div style="margin-left: 10px;margin-top:20px;color: black;height: 50px;font-size: 14px;width: 100%;overflow: hidden">
                        {{item.name}}
                    </div>
                    <div style="margin-left: 10px;font-size: 10px">
                        {{item.artistName}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "mvDetail",
        data(){
            return{
                mvId:'',
                mv:{},
                xgmvs:[]

            }
        },
        created() {
            this.mvId=this.$route.query.id
            this.getMv(this.mvId)
            this.getXgmv(this.mvId)
            console.log(mvId)
            },
        methods:{
            // 获取当前mv的视频
            getMv(id){
                    axios({
                        url:'https://autumnfish.cn/mv/url',
                        methods: 'get',
                        params:{
                            id
                        }
                    }).then(res=>{
                        this.mv=res.data.data

                    },err=>{
                        console.log(err);
                    })
            },
            // 获取相关mv的信息
            getXgmv(id){
                axios({
                    url:' https://autumnfish.cn/simi/mv',
                    methods: 'get',
                    params:{
                        mvid:id
                    }
                }).then(res=>{
                    this.xgmvs=res.data.mvs;
                    console.log(res);
                },err=>{
                    console.log(err);
                })
            },
            // 获取当前mv的详细信息

            
            // 点击相关mv重新请求数据
            mvDetail(item){
                    this.getMv(item.id);
                    this.getXgmv(item.id)
            }

        }

    }
</script>

<style scoped>
    .mvDetial{
        display: flex;
    }

        .mv{
            margin-top: 30px;
            width: 600px;
            height: 350px;

        }
    .xgmv{
        margin: 10px;
        width: 95%;
        height: 100px;
        display: flex;
    }
    .xgmv:hover{
        cursor:pointer
    }
</style>